window.onload = function() {/*页面加载后执行该脚本*/
    waterfull('main','box');
    window.onscroll = function() {
        /*满足条件加载图片(true/false)*/
         var data=[];
        if(checkScroll()) {
            //调用ajax函数
            ajax({
                url:'./img.json',
                type:'GET',
                dataType:'json',
                data: data,
                success:function(response,xml){
                    data = JSON.parse(response);
                    var datas=data.data;
                    var parent=document.getElementById('main');
                    for(var i=0; i<datas.length;i++) {
                        var obox=document.createElement('div');
                        obox.className='box';
                        parent.appendChild(obox);
                        var opic=document.createElement('div');
                        opic.className='pic';
                        obox.appendChild(opic);
                        var oImg=document.createElement('img');
                        oImg.src=datas[i].imgUrl;
                        opic.appendChild(oImg);
                    }
                    waterfull('main','box');
                },
                error:function(status){
                    //失败后执行的代码
                    console.log(status);
                }
            });
        }
    }
}
function waterfull(main, obox) {
    var parent = document.getElementById(main);
    /*获取main下的所有box*/
    var boxs = byClassName(parent, obox);
    /*计算页面显示多少列（页面宽/box宽）*/
    var boxw=boxs[0].offsetWidth;
    var col = Math.floor(document.documentElement.clientWidth / boxw);
    /*设置main的宽度*/
    parent.style.cssText='width:'+boxw*col+'px;margin:0 auto;'
    /*获取上一列每张图的高度，往图片最矮的里面塞图片*/
    var colH=[];
    for(var i=0;i<boxs.length;i++){
        if(i<col){
            colH.push(boxs[i].offsetHeight)
        } else {
            /*Math.min() 求一组数据的最小值,不能直接取数组使用apply改变this的指向*/
            var minH=Math.min.apply(null, colH);
            /*找最小值所在的位置(索引)*/
            var minHIndex=getMinHIndex(colH,minH);
            /*将图片移入最小图片下面*/
            boxs[i].style.position='absolute';
            boxs[i].style.top=minH+'px';
            /*1.获取第一张图片的width*index*/
            boxs[i].style.left=boxw*minHIndex+'px';
            /*2.获取第一张到最小图片的位置width*/
            // boxs[i].style.left=boxs[minHIndex].offsetLeft+'px';
            /*改变数组中每一列图片的高*/
            colH[minHIndex] +=boxs[i].offsetHeight;
        }
    }
}
function byClassName(parent,obox) {
    var oboxs = new Array();
    var oElement = parent.getElementsByTagName('*');
    for(var i=0; i< oElement.length; i++) {
        if(oElement[i].className == obox) {
            oboxs.push(oElement[i]);
        }
    }
    return oboxs;
}
function getMinHIndex(colH,minH) {
    for(i=0;i<colH.length;i++){
        if(colH[i]===minH) {
            return i;
        }
    }
}
function checkScroll() {
    var scrollMain=document.getElementById('main');/*获取main*/
    var scrollBoxs = byClassName(scrollMain,'box');
    /*获取所有图片到最后一张图片的整体height + 最后一个盒子高度的一半*/
    var lastBoxH=scrollBoxs[scrollBoxs.length-1].offsetTop+Math.floor(scrollBoxs[scrollBoxs.length-1].offsetHeight/2);
    /*滚动条滚走的距离:标准模式(document.documentElement.scrollTop)与混杂模式(通过body.scrollTop);指定了<!DOCTYPE html>时使用标准模式，没指定使用混杂模式*/
    var scrollTOP= document.body.scrollTop||document.documentElement.scrollTop;
    /*获取浏览器的高度*/
    var broHeight = document.body.clientHeight||document.documentElement.clientHeight;
    return (lastBoxH<scrollTOP+broHeight)?true:false;
}

//创建ajax函数
function ajax(options){
    options=options||{};
    options.type=(options.type||'GET').toUpperCase();
    options.dataType=options.dataType||'json';
    params=formatParams(options.data);

    //创建-第一步
    var xhr;
    //非IE6
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        //ie6及其以下版本浏览器
        xhr=ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收-第三步
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            var status=xhr.status;
            if(status>=200&&status<300){
                options.success&&options.success(xhr.responseText,xhr.responseXML);
            }else{
                options.error&&options.error(status);
            }
        }
    }

    //连接和发送-第二步
    if(options.type=='GET'){
        xhr.open('GET',options.url+'?'+params,true);
        xhr.send(null);
    }else if(options.type=='POST'){
        xhr.open('POST',options.url,true);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
}

//格式化参数
function formatParams(data){
    var arr=[];
    for(var name in data){
        arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
    }
    arr.push(('v='+ Math.random()).replace('.',''));
    return arr.join('&');
}
